<template>
  <div>
      老师列表 | <router-link to="/addTeacher">新增老师</router-link>   <hr>
      姓名:<input type="text" v-model="teacherSearchVo.teacherName">
      学校:<select v-model="teacherSearchVo.schoolId">
               <option value="">--请选择--</option>
               <option v-for="(s,index) in schoolList" :key="index" :value="s.id">{{s.schoolName}}</option>
          </select>
      <br>
      薪资:<input type="text" v-model="teacherSearchVo.minSalary">-
           <input type="text" v-model="teacherSearchVo.maxSalary"><br>
      入职时间: <input type="text" v-model="teacherSearchVo.minDate">-
           <input type="text" v-model="teacherSearchVo.maxDate"><br>    
      <input type="button" value="搜索" @click="initTeaList()"> <br>
      <input type="button" value="批量删除" @click="batchDelete()">
      <table border="1">
          <tr>
              <th><input type="checkbox" v-model="selectAll" @change="change()">全选</th>
              <th>编号</th>
              <th>姓名</th>
              <th>密码</th>
              <th>性别</th>
              <th>类型</th>
              <th>学校</th>
              <th>入职日期</th>
              <th>薪资</th>
              <th>备注</th>
              <th>操作</th>
          </tr>
          <tr v-for="(tea,index) in teaList" :key="index">
              <td><input type="checkbox" v-model="dels" :value="tea.id"></td>
              <td>{{tea.id}}</td>
              <td>{{tea.teacherName}}</td>
              <td>{{tea.pwd}}</td>
              <td>{{tea.sex}}</td>
              <td>{{tea.type==null?"":tea.type.city}}</td>
              <td>{{tea.school==null?"":tea.school.schoolName}}</td>
              <td>{{tea.hireDate}}</td>
              <td>{{tea.salary}}</td>
              <td>{{tea.remark}}</td>
              <td><router-link :to="'/updateTeacher/'+tea.id">修改</router-link>   
                  <a href="#" @click="deleteById(tea.id)">删除</a> 
              </td>
          </tr>
      </table>
    <!--
        @size-change：每页条数通过下拉列表框发生改变
        @current-change：当前页码发生改变
        current-page:当前是第几页 2
        page-sizes：下拉列表框，设置每页显示条数
        page-size：每页显示条数 3
        total：该数据在数据库里的总条数 16，作用：计算总页数

    -->
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="teacherSearchVo.page"
        :page-sizes="[1,2,3,4,50,1000]"
        :page-size="teacherSearchVo.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
    data() {
        return {
            teacherSearchVo:{
                page:1,
                rows:3,
                schoolId:""
            },
            teaList:[],//老师列表
            schoolList:[],//所有的学校集合
            total:0,//总条数
            dels:[],//批量删除的id集合
            selectAll:false,//true全选  false全不选
        }
    },
    methods: {
        async initTeaList(){
            let res = await this.$http.get("/teacher/condition",{params:this.teacherSearchVo})
            console.log(res)
            this.teaList = res.data.data
            this.total = res.data.total
        },
        async initSchoolList(){
            let res = await this.$http.get("/school/all")
            this.schoolList = res.data.data
            
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.teacherSearchVo.rows = val
            this.initTeaList()

        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.teacherSearchVo.page = val
            this.initTeaList()
        },
        async deleteById(id){
            console.log(id)
            let res = await this.$http.delete("/teacher/"+id)
            if(res.data.code==10000){
                alert("删除成功")
                this.initTeaList()
            }else{
                alert("删除失败")
            }
        },
        async batchDelete(){
            // 组装id
            let delIds = "";
            for(let i=0;i<this.dels.length;i++){
                delIds += this.dels[i] + ","
            }
            delIds = delIds.substring(0,delIds.length-1)
            // 调用ajax
            let res = await this.$http.delete("/teacher/batchDelete/"+delIds)
            alert("删除成功")
            this.initTeaList()
        },
        change(){
            console.log(this.selectAll)
            if(this.selectAll==true){
                //全选
                for(let i=0;i<this.teaList.length;i++){
                    this.dels.push(this.teaList[i].id)
                }

            }else{
                this.dels = []
            }
        }
    },
    created() {
        this.initTeaList()
        this.initSchoolList()
    },
    watch:{
        //监听哪个属性
        'dels':function(){
            if(this.dels.length==this.teaList.length){
                this.selectAll = true
            }else{
                this.selectAll = false
            }
        },
        'teaList':function(){

        }
    }
}
</script>

<style>

</style>